<template>
<!-- 事件委托 -->
  <div class="goods-list" @click="shop">
    <!-- 添加自定义属性 便于获取数据 -->
    <div class="goods-item" v-for="item in da1" :key="item.id">
      <img :src="item.url" alt :data-shu="item.id">

      <div class="cone">
        <h1 class="title">{{ item.title || '未知' }}</h1>
        <span>热卖中</span>
        <span class="now">￥{{ item.price }}</span>
        <span>剩{{ item.reserve }}件</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      da1: [
        { id: 1, reserve: 50, url: "../../image2/01.jpg", price: 100 },
        { id: 2, reserve: 80, url: "../../image2/02.jpg", price: 340 },
        { id: 3, reserve: 50, url: "../../image2/03.jpg", price: 600 },
        { id: 4, reserve: 99, url: "../../image2/04.jpg", price: 600 },
        { id: 5, reserve: 330, url: "../../image2/05.jpg", price: 100 },
        { id: 6, reserve: 555, url: "../../image2/06.jpg", price: 200 },
        { id: 7, reserve: 23, url: "../../image2/07.jpg", price: 4300 },
        { id: 8, reserve: 677, url: "../../image2/08.jpg", price: 495 },
        { id: 9, reserve: 33, url: "../../image2/09.png", price: 670 },
        { id: 10, reserve: 55, url: "../../image2/10.png", price: 220 }
      ]
    };
  },
  methods: {
    shop(e){
    //  console.log(e.target);
    //   console.log(e.target.dataset.shu);
    let id = e.target.dataset.shu;
      this.$router.push({ name: "shopInfo" , params : { id : id}})
    }
  }
};
</script>
<style  scoped>
.goods-list {
  margin: 40px 0;
  display: flex;
  flex-wrap: wrap;
  padding: 7px;
  justify-content: space-between;
  position: absolute;
}

  .goods-item {
    width: 49%;
    border: 1px solid #ccc;
    box-shadow: 0 0 8px #ccc;
    margin: 4px 0;
    padding: 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
  }
    img {
      width: 100%;
    }
    .title {
      font-size: 14px;
    }
    .cone {
        text-align: center;
    }

    

</style>